<template>
  <div>
    <main class="recomContent">
      <div class="authorAndcomment" v-for="(recom,a) in recommendList" :key="a">
        <div v-if="recom.content != ''">
          <div v-if="recom.author != null" class="authorPopup">
            <img :src="recom.author.cover" alt>
            <p class="authorName">
              <span v-text="recom.author.name"></span>
            </p>
            <p class="authorAngle" @click="copyClick(a)">
              <span>+ 关注</span>
            </p>
          </div>

          


          <div v-if="recom.content != null" class="authorAllcontent">
            <p v-text="recom.content" class="authorPublish"></p>
          </div>
          <img class="authorBackgrondImg" v-if="recom.image != null" :src="recom.image.url" alt>
          <div v-if="recom.user != null" class="userPublish">
          </div>

          <!-- 底部 点赞 -->
          <div v-if="recom.content != ''" class="userFoot">
            <p class="fa fa-share-alt">
            </p>
            <p>
                <span class="fa fa-star"></span>
            </p>
            <p class="fa fa-heart"></p>
            <p class="fa fa fa-pencil"></p>
          </div>
        </div>
      </div>
    </main>
    <p class="status" v-show="status=='loading'">
                    <span class="fa fa-spinner fa-pulse"></span>
                    <span>正在加载</span>
      </p>
  </div>
</template>
<script>

import { Popup } from "vux";
export default {
  data() {
    return {
      isShow: false,
      recommendList: [],
      status: "loading",
      loadingMore: false,
    };
  },
  components: {
    Popup
  },
  mounted() {
    this.getRecommendInfo()
    // this.scollTest()
    window.onscroll = this.didscrool
  },
  methods: {
    getRecommendInfo: function() {
      var _this = this;
      this.$http
        .get(
          "/weiju/api/v6/op/channels/11?page=1&per_page=20&token=edd704412ee957bc1594c902f172b9c8&timestamp=1545182633&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=49a1fdcef251c3d29e843e66f3d4b067"
        )
        .then(function(value) {
          _this.recommendList = value.body.data;
        });
    },
    // 关注
    copyClick: function(a) {
      console.log(a);
      console.log($(".authorAngle").eq(a))
      // $(".authorAngle").eq(a).hide();
        if(a<=3) {
             $(".authorAngle").eq(a).hide();
        }
        if(a>3) {
                 $(".authorAngle").eq(a-1).hide();
        }
    },
    didscrool() {
       console.log('懒加载')
      // 获取当前页面的滚动距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 获取内容高度
      var contentHeight = document.body.clientHeight;
      var scrollHeight = document.body.scrollHeight;
      // 获取当前屏幕高度
      var windowHeight = window.innerHeight;
      if (scrollTop + windowHeight > contentHeight - 40) {
        // 滚动条以到最下方  而且现在没有加载更多的内容
        if (this.loadingMore == false) {
            
          this.loadMore();
        }
      }
    },
   
    loadMore: function() {
      this.status = "loading";
      this.loadingMore = true;
      this.dataLength += 3;
      var _this = this;
      this.$http
        .get(
          "/weiju/api/v6/op/channels/11?page=1&per_page=20&token=edd704412ee957bc1594c902f172b9c8&timestamp=1545182633&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=49a1fdcef251c3d29e843e66f3d4b067"
        )
        .then(
          function(value) {
           // console.log(value)
            _this.recommendList = _this.recommendList.concat(value.body.data);
            _this.loadingMore = false;
            _this.status = "success";
          },
          function(err) {
            _this.status = "fail";
          }
        );
    }
  }
};
</script>
<style scoped>
.authorAndcomment {
  width: 98vw;
  border-top: 3vw solid rgb(248, 247, 243);
}
.authorPopup {
  width: 96vw;
  height: 10vw;
  display: flex;
  position: relative;
}
.authorPopup img {
  width: 10vw;
  height: 10vw;
  margin: 1vw;
  border-radius: 50%;
}
.authorName {
  margin: 1vw;
  font-size: 4.5vw;
}
.authorAngle {
  position: absolute;
  right: 3vw;
  color: #09bb07;
}
.copyShow p {
  text-align: center;
  line-height: 15vw;
  color: rgb(160, 150, 150);
}
.copyShow > p {
  border-bottom: 1px solid rgb(230, 222, 222);
}
.authorAllcontent {
  padding: 2vw;
}
.authorPublish {
  width: 80vw;
  margin-left: 13vw;
  font-size: 4vw;
  overflow: hidden;
  white-space: wrap;
  text-overflow: ellipsis;
}
.authorBackgrondImg {
  margin-left: 2vw;
  width: 50vw;
  height: 40vw;
  border-radius: 2vw;
}
.userPublish {
  display: flex;
  padding-bottom: 2vw;
  padding-left: 2vw;
}
.userPublish img {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  margin-top: 2vw;
}
.userPublish > p {
  font-size: 3vw;
  /* margin: 2vw; */
}
.userFoot {
  width: 90vw;
  height: 5vw;
  display: flex;
  justify-content: space-around;
  padding: 2vw;
  font-size: 4vw;
  margin-left: 5vw;
}
.fa{
    color: gray;
}
</style>
